<template>
  <div>
    <TheCreateForm
      ref="formRefs"
      title="保证金退款记录"
      :api="formApi"
      :options="formOption"
      :form.sync="ruleForm"
      mode="view"
      :renderFunc="renderFunc"
    >
      <template v-slot:approvalState="{ slotProps }">
        <div>
          <el-link
            :type="getTypeColor(ruleForm.approvalState)"
            :underline="false"
          >{{ ruleForm.approvalState | filterRechargeChangeState }}</el-link>
          <div
            v-if="ruleForm.approvalState == 'APPROVAL_REFUSE'"
          >原因：{{ ruleForm.approvalRefuseReason }}</div>
        </div>
      </template>
      <template v-slot:changeAmount="{ slotProps }">
        <div>
          <div>{{ ruleForm.changeAmount | filterPriceFormat }}</div>
        </div>
      </template>
      <template v-slot:footer="{ slotProps }">
        <!-- <el-button @click="onRevocation">撤回</el-button> -->
        <!-- <el-button @click="onClose">关闭</el-button> -->

      </template>
    </TheCreateForm>
    <TheDingAuth ref="dingAuthRefs" />
  </div>
</template>

<script>
import {
  apiRefundDetail,
  apiWorkerSecurityDepositRevocation
} from "@/api/bail.js";
import TheDingAuth from "@/components/TheDingAuth/index.vue";

export default {
  components: {TheDingAuth},
  data() {
    return {
      formApi: apiRefundDetail,
      formOption: [
        {
          type: "input",
          field: "approvalState",
          title: "状态",
          slot: "approvalState"
        },
        {
          type: "input",
          field: "workerId",
          title: "师傅id"
        },
        {
          type: "input",
          field: "workerName",
          title: "师傅姓名"
        },
        {
          type: "input",
          field: "workerPhoneNumber",
          title: "手机号"
        },
        {
          type: "input",
          field: "changeAmount",
          title: "退款金额",
          slot: "changeAmount"
        },
        {
          type: "upload",
          field: "approvalCertificate",
          disabled: true,
          title: "相关凭证"
        },
        {
          type: "textarea",
          field: "approvalRemark",
          title: "备注"
        },
        {
          type: "input",
          field: "initiateName",
          title: "发起人"
        },
        {
          type: "input",
          field: "createTime",
          title: "发起时间"
        },
        {
          type: "input",
          field: "approvalName",
          title: "审批人"
        },
        {
          type: "input",
          field: "approvalTime",
          title: "审批时间"
        },
        {
          type: "input",
          field: "completionTime",
          title: "完成时间"
        }
      ],
      id:'',
      ruleForm: {}
    };
  },
  mounted() {},
  methods: {
    onClose(){
      this.$refs.formRefs.close()

    },
    onRevocation() {
      const _this = this
      _this
        .$prompt("此操作将撤销退款申请, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "撤回原因...",
        })
        .then(({ value }) => {
          _this.$refs.dingAuthRefs.open(result => {
            const params = {
              id: row.id,
              dingtalkUserId: result.initiateDingtalkId,
              reason:value
            };
            apiWorkerSecurityDepositRevocation(params).then(res => {
              if (res.code == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: res.msg
                });
                this.$refs.formRefs.close()
                this.$emit('onRevocation')
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            });
          });
        })
        .catch(() => {});
    },
    open(row) {
      this.id = row.id
      this.$refs.formRefs.open(row);
    },
    renderFunc(res) {
      return {
        ...res.data,
        approvalCertificate: res.data.approvalCertificate.split(",")
      };
    },
    getTypeColor(str) {
      if (str == "APPROVAL_ING") {
        return "warning";
      } else if (str == "APPROVAL_REFUSE") {
        return "danger";
      } else if (str == "APPROVAL_FINISH") {
        return "success";
      } else if (str == "APPROVAL_REVOKE") {
        return "info";
      }
    }
  }
};
</script>
